<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<!-- top logo -->
		<view class="top-view flex row aCenter">
			<image class="top-logo" src="../../static/pty_logo.png"></image>
			<view class="top-right flex">
				<text class="top-name">派对兔酒吧</text>
				<text class="top-z">桌位号: {{table_number?table_number:'空'}}</text>
			</view>
		</view>
		<!-- 餐车列表 -->
		<view class="content-view flex-1 flex">
			<text class="content-title">餐车详情：</text>
			<view class="flex-1 overflow-hidden" style="position: relative;">
				<scroll-view scroll-y class="screen-all" style="position: absolute;">
					<view>
						<view class="item-view flex row" v-for="(item, index) in goodsList">
							<image class="item-icon" :src="item.goods_image"></image>
							<view class="flex flex-1">
								<text class="item-title">{{ item.goods_name }}</text>
								<view class="item-pn-view flex row aCenter">
									<text class="item-price">¥{{ item.goods_price }}</text>
									<text class="item-num">x{{ item.num }}</text>
								</view>
								<text class="item-scp">{{ item.spec_name ? '规格:【'+item.spec_name+'】':'' }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<text class="content-totle">合计：¥{{total_price}}</text>
		</view>
		<!-- 备注信息 -->
		<view class="mark-view flex">
			<text class="content-title">备注：</text>
			<textarea class="textarea-view" v-model="marks" placeholder="请输入备注信息">
				
			</textarea>
		</view>
		<!-- 提交订单 -->
		<view class="btm-view flex row aCenter">
			<text class="btm-price">共{{goodsNum ? goodsNum : 0}}件 ¥{{total_price}}</text>
			<view class="btn-view flex center" @click="submitOrder()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartIds: '',
				
				goodsList: [],
				total_price: 0,
				table_number: '',
				
				goodsNum: 0,
				
				invite_code: '',
				marks: '',
			}
		},
		onLoad(option) {
			this.cartIds = option.cartIds;
			this.getGoodsInfo(option.order);
			// this.cartSettle();
			
			// 桌位id
			this.invite_code = uni.getStorageSync("invite_code");
		},
		methods: {
			getGoodsInfo (order) {
				let data = JSON.parse(order);
				this.goodsList = data.goodsList;
				this.total_price = data.total_price;
				//桌位号
				this.table_number = data.table_number;
				
				let _num = 0;
				this.goodsList.map((item, index)=>{
					_num += item.num;
				});
				this.goodsNum = _num;
				
				console.log(data, this.cartIds);
			},
			// api/order/cart_settle
			// 写在上个页面
			// cartSettle(){
			// 	let params = {
			// 		token: uni.getStorageSync("token"),
			// 		cart_id: this.cartIds, //购物车id
			// 	}
			// 	console.log(params);
			// 	this.$request("api/order/cart_settle", params)
			// 		.then(({ code, msg, data, time }) => {
			// 			console.log("net", code, msg, data);
			// 			if(code == 1){
							
			// 			}else{
							
			// 			}
			// 		}).catch((e) => {
			// 			console.log(e);
			// 		});
			// },
			//提交订单
			submitOrder () {
				let params = {
					token: uni.getStorageSync("token"),
					cart_id: this.cartIds, //购物车id
					// coupon_id: '', //优惠卷id
					// discount_money: '', //优惠金额	
					total_price: this.total_price, //实付金额
					// marks : this.marks;
					remarks: this.marks,
				}
				console.log(params);
				this.$request("api/order/cart_pay", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							// 生成支付订单
							// add_order_id: "27"
							// money: "3770"
							uni.redirectTo({
								// url: '../role-user/pay?data=' + JSON.stringify(data),
								url: '/pages/role-user/pay?totlePrice=' + data.money + '&orderId=' + data.add_order_id,
							})
						}
						// else if (code==2){
						// 	uni.navigateBack({
						// 		delta:1
						// 	})
						// }
					}).catch((e) => {
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #010B24;
	}
	.top-view {
		width: 100%;
		height: 180rpx;
		padding: 0 36rpx;
		border-bottom: 10rpx solid #121C33;
	}
	.top-logo {
		width: 102rpx;
		height: 102rpx;
	}
	.top-right {
		margin-left: 25rpx;
	}
	.top-name {
		font-size: 30rpx;
		color: #FFF;
		font-weight: bold;
	}
	.top-z {
		font-size: 28rpx;
		color: #6F747D;	
		margin-top: 8rpx;
	}
	.content-view {
		padding: 0 36rpx;
	}
	.content-title {
		font-size: 30rpx;
		color: #FFF;
		margin-top: 20rpx;
	}
	.content-totle {
		width: 100%;
		font-size: 30rpx;
		color: #FFF;
		margin-top: 20rpx;
		text-align: end;
	}
	.item-view {
		border-bottom: 1rpx solid #1F283E;
		padding: 30rpx 0;
	}
	.item-icon {
		width: 144rpx;
		height: 136rpx;
		margin-right: 30rpx;
	}
	.item-title {
		height: 60rpx;
		overflow: hidden;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #FFF;
	}
	.item-price {
		font-size: 30rpx;
		color: #FFF;
	}
	.item-num {
		font-size: 28rpx;
		color: #6F747D;
		margin-left: 60rpx;
	}
	.item-pn-view {
		justify-content: space-between;
		margin: 10rpx 50rpx 0 0;
	}
	.item-scp {
		font-size: 28rpx;
		color: #6F747D;
	}
	.mark-view {
		padding: 0 36rpx;
	}
	.textarea-view {
		width: 670rpx;
		height: 200rpx;
		border: 1rpx solid #8F99B188;
		border-radius: 20rpx;
		margin-top: 12rpx;
		box-sizing: border-box;
		padding: 18rpx 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.btm-view {
		width: 100%;
		height: 140rpx;
		padding: 0 36rpx;
		justify-content: space-between;
	}
	.btm-price {
		font-size: 28rpx;
		color: #FFF;
	}
	.btn-view {
		width: 250rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFF;
	}
	.btn-view:active {
		background-color: #B053FFEE;
	}
</style>
